<script lang="ts" setup>
import { useShoppingCartStore } from '@/stores';

interface Props {
	model?: any;
}

defineProps<Props>();
const shoppingCartStore = useShoppingCartStore();

function handleAddShoppingCart() {
	// shoppingCartStore
}
</script>

<template>
	<view class="dlk-product">
		<x-image width="100%" height="331rpx" mode="widthFix" :src="model.cover?.url"></x-image>
		<x-container direction="vertical" padding="20rpx" gap="20rpx">
			<x-text color="#333333" :size="24" :line-height="32" align="justify" bold>{{ model.name }}</x-text>
			<x-text color="#F95731" :size="28">￥{{ model.priceMarket }}</x-text>
			<x-container justify="between" class="product-info">
				<x-space direction="vertical">
					<view class="price-wrapper">
						<view class="text">预计到手</view>
						<view class="price">
							<dlk-currency :value="model.price" :size="28" color="#fff"></dlk-currency>
						</view>
					</view>
					<x-text color="#999999" :size="24">已售卖100+件</x-text>
				</x-space>
				<x-image class="buy" src="/index/buy.png" width="100rpx" height="100rpx" prefix @tap.stop="handleAddShoppingCart"></x-image>
			</x-container>
		</x-container>
	</view>
</template>

<style lang="scss" scoped>
.dlk-product {
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;

	.product-info {
		position: relative;

		.buy {
			position: absolute;
			right: -20rpx;
			bottom: -10rpx;
		}
	}

	.price-wrapper {
		display: flex;
		align-items: center;
		overflow: hidden;

		.text {
			border-radius: 10rpx 0 0 10rpx;
			padding: 6rpx 8rpx;
			color: #fa5732;
			font-size: 20rpx;
			line-height: 32rpx;
			background-color: #fff5f3;
		}

		.price {
			border-radius: 0 10rpx 10rpx 0;
			padding: 6rpx 8rpx;
			color: #fff;
			font-size: 28rpx;
			line-height: 28rpx;
			background-color: #fa5732;
			display: flex;
			align-items: flex-end;

			> text {
				font-size: 26rpx;
			}
		}
	}
}
</style>
